<template>
  <div>
    <el-container>
      <el-main>
        <permissionsadd ref="addchild" @callAdd="reload" />
        <permissionsedit ref="editchild" @callEdit="reload" />
        <el-button size="mini" type="primary" @click="onaddshow">新增</el-button>
        <el-table :data="datasource" style="width: 100%; font-size: 10px" max-height="450" row-key="id"
          default-expand-all :tree-props="{ children: 'children', haschildren: 'haschildren' }">
          <el-table-column :show-overflow-tooltip="true" prop="permissionscode" label="权限编码" sortable width="auto" />
          <el-table-column prop="permissionsname" label="权限名" sortable width="auto" />
          <el-table-column :show-overflow-tooltip="true" prop="description" label="描述" sortable width="auto" />
          <el-table-column prop="sort" label="序号" sortable width="auto" />

          <el-table-column prop="icon" label="Icon" sortable width="auto">
            <template slot-scope="scope">
              <i :class="scope.row.icon" />
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" sortable width="auto" />
          <el-table-column prop="alwaysshow" label="显示" sortable width="auto" />
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" style="margin-right: 10px" @click="oneditshow(scope.row)">
                编辑
              </el-button>
              <el-popconfirm title="Are you sure to delete?" style="margin-right: 10px" @onConfirm="confirm(scope.row)">
                <el-button slot="reference" type="text" size="small">
                  删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import {
    getTreepermissions,
    deletepermissions
  } from '@/api/permissions'
  import permissionsadd from './tablecomponents/permissionsadd.vue'
  import permissionsedit from './tablecomponents/permissionsedit.vue'
  export default {
    name: 'Permissionstable',
    components: {
      permissionsadd,
      permissionsedit
    },
    data() {
      return {
        datasource: []
      }
    },
    async created() {
      this.getTreepermissions()
    },
    methods: {
      async confirm(rows) {
        var res = await deletepermissions(rows)
        if (res.code === 200) {
          this.$message({
            message: 'Success',
            type: 'success'
          })

          await this.getTreepermissions()
        }
      },
      async getTreepermissions() {
        var {
          data
        } = await getTreepermissions()
        this.datasource = data
      },
      onaddshow() {
        this.$refs.addchild.onshow(this.datasource)
      },
      oneditshow(obj) {
        this.$refs.editchild.onshow(obj, this.datasource)
      },
      async reload() {
        await this.getTreepermissions()
      }
    }
  }
</script>
<style scoped>
</style>
